<template>
	<view class="container">
		<view class="header-operation">
			<view class="header-operation-left">
				<view :class="{ active: goodsType == 'oncecard' }" @click="switchGoodsType('oncecard')">限次卡</view>
				<view :class="{ active: goodsType == 'timecard' }" @click="switchGoodsType('timecard')">限时卡</view>
				<view :class="{ active: goodsType == 'commoncard' }" @click="switchGoodsType('commoncard')">通用卡</view>
			</view>
			<view class="header-operation-right"></view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getOncecard()"
				v-if="goodsType == 'oncecard'">
				<view class="table-list" v-show="oncecardData.list.length > 0">
					<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in oncecardData.list"
						:key="index" @click="goodsSelect(item)">
						<view class="item-img">
							<image :src="
									item.goods_image == 'public/uniapp/default_img/goods.png'
										? $util.img('public/uniapp/default_img/goods.png')
										: $util.img(item.goods_image.split(',')[0], { size: 'small' })
								" @error="item.goods_image = 'public/uniapp/default_img/goods.png'"></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.goods_name }}</view>
							<view class="item-rights"></view>
							<view class="item-money">
								<text class="util">￥</text>
								{{ item.discount_price | moneyFormat }}
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0">
							<image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="empty" v-if="!oncecardData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无卡项</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getTimecard()"
				v-if="goodsType == 'timecard'">
				<view class="table-list" v-show="timecardData.list.length > 0">
					<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in timecardData.list"
						:key="index" @click="goodsSelect(item)">
						<view class="item-img">
							<image :src="
									item.goods_image == 'public/uniapp/default_img/goods.png'
										? $util.img('public/uniapp/default_img/goods.png')
										: $util.img(item.goods_image.split(',')[0], { size: 'small' })
								" @error="item.goods_image = 'public/uniapp/default_img/goods.png'"></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.goods_name }}</view>
							<view class="item-rights"></view>
							<view class="item-money">
								<text class="util">￥</text>
								{{ item.discount_price | moneyFormat }}
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0">
							<image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="empty" v-if="!timecardData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无卡项</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getCommoncard()"
				v-if="goodsType == 'commoncard'">
				<view class="table-list" v-show="commoncardData.list.length > 0">
					<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in commoncardData.list"
						:key="index" @click="goodsSelect(item)">
						<view class="item-img">
							<image :src="
									item.goods_image == 'public/uniapp/default_img/goods.png'
										? $util.img('public/uniapp/default_img/goods.png')
										: $util.img(item.goods_image.split(',')[0], { size: 'small' })
								" @error="item.goods_image = 'public/uniapp/default_img/goods.png'"></image>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.goods_name }}</view>
							<view class="item-rights"></view>
							<view class="item-money">
								<text class="util">￥</text>
								{{ item.discount_price | moneyFormat }}
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0">
							<image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image>
						</view>
					</view>
				</view>
				<view class="empty" v-if="!commoncardData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无卡项</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ncCard',
		props: {
			type: {
				type: String,
				default: 'oncecard'
			}
		},
		data() {
			return {
				goodsType: '',
				pageSize: 35,
				oncecardData: {
					page: 0,
					total: 1,
					list: []
				},
				timecardData: {
					page: 0,
					total: 1,
					list: []
				},
				commoncardData: {
					page: 0,
					total: 1,
					list: []
				},
				searchText: '',
				itemNum: 3,
				mediaQueryOb: null
			};
		},
		created() {
			this.goodsType = this.type;
			this.getOncecard();
			this.getTimecard();
			this.getCommoncard();
		},
		mounted() {
			this.mediaQueryOb = uni.createMediaQueryObserver(this);

			this.mediaQueryOb.observe({
					maxWidth: 1300
				},
				matches => {
					if (matches) this.itemNum = 2;
				}
			);

			this.mediaQueryOb.observe({
					minWidth: 1301,
					maxWidth: 1900
				},
				matches => {
					if (matches) this.itemNum = 3;
				}
			);

			this.mediaQueryOb.observe({
					minWidth: 1901
				},
				matches => {
					if (matches) this.itemNum = 4;
				}
			);
		},
		methods: {
			switchGoodsType(type) {
				this.goodsType = type;
			},

			//卡项相关
			goodsSelect(data) {
				if (!data.stock) return;
				this.$emit('select', data);
			},

			search() {
				if (this.searchText == '') return;
				this.oncecardData.page = 0;
				this.getOncecard();
			},
			getOncecard() {
				if (this.oncecardData.page + 1 > this.oncecardData.total) return;
				this.oncecardData.page += 1;
				this.$api.sendRequest({
					url: '/cashier/storeapi/card/page',
					data: {
						page: this.oncecardData.page,
						search_text: this.searchText,
						page_size: this.pageSize,
						card_type: 'oncecard',
						goods_state: 1,
						status: 1
					},
					success: res => {
						if (res.code == 0) {
							this.oncecardData.total = res.data.page_count || 1;
							if (this.oncecardData.page == 1) this.oncecardData.list = [];
							if (res.data.list.length) this.oncecardData.list = this.oncecardData.list.concat(
								res.data.list);
						}
					}
				});
			},
			getTimecard() {
				if (this.timecardData.page + 1 > this.timecardData.total) return;
				this.timecardData.page += 1;
				this.$api.sendRequest({
					url: '/cashier/storeapi/card/page',
					data: {
						page: this.timecardData.page,
						search_text: this.searchText,
						card_type: 'timecard',
						goods_state: 1,
						page_size: this.pageSize
					},
					success: res => {
						if (res.code == 0) {
							this.timecardData.total = res.data.page_count || 1;
							if (this.timecardData.page == 1) this.timecardData.list = [];
							if (res.data.list.length) this.timecardData.list = this.timecardData.list.concat(
								res.data.list);
						}
					}
				});
			},
			getCommoncard() {
				if (this.commoncardData.page + 1 > this.commoncardData.total) return;
				this.commoncardData.page += 1;
				this.$api.sendRequest({
					url: '/cashier/storeapi/card/page',
					data: {
						page: this.commoncardData.page,
						search_text: this.searchText,
						card_type: 'commoncard',
						goods_state: 1,
						page_size: this.pageSize
					},
					success: res => {
						if (res.code == 0) {
							this.commoncardData.total = res.data.page_count || 1;
							if (this.commoncardData.page == 1) this.commoncardData.list = [];
							if (res.data.list.length) this.commoncardData.list = this.commoncardData.list
								.concat(res.data.list);
						}
					}
				});
			},
			destroyed() {
				this.mediaQueryOb.disconnect();
			},
			switchStoreAfter() {
				this.oncecardData = {
					page: 0,
					total: 1,
					list: []
				};
				this.timecardData = {
					page: 0,
					total: 1,
					list: []
				};
				this.commoncardData = {
					page: 0,
					total: 1,
					list: []
				};
				this.getOncecard();
				this.getTimecard();
				this.getCommoncard();
			},
		},
		watch: {
			serviceCategoryId: function(nval) {
				this.serviceData.page = 0;
				this.$refs.loading.show();
			},
			goodsCategoryId: function(nval) {
				this.goodsData.page = 0;
				this.$refs.goodsLoading.show();
				this.getGoods();
			},
			type: function() {
				this.searchText = '';
			}
		},
		computed: {
			goodsSpec() {
				if (this.allsku && this.skuinfo) {
					return this.allsku['sku_id_' + this.skuinfo.sku_id].goods_spec_format;
				}
				return [];
			}
		}
	};
</script>

<style lang="scss">
	.container {
		height: 100%;
	}

	.header-operation {
		padding: 0.2rem 0;
		border-bottom: 0.01rem solid #e6e6e6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.header-operation-left {
			display: flex;
			align-items: center;

			view {
				width: 1rem;
				height: 0.35rem;
				line-height: 0.35rem;
				text-align: center;
				font-size: 0.14rem;
				border: 0.01rem solid #e6e6e6;
				border-left-width: 0;
				transition: all 0.3s;
				cursor: pointer;

				&:hover,
				&.active {
					border-color: $primary-color;
					color: $primary-color;
					background-color: rgba($color: $primary-color, $alpha: 0.1);
					box-shadow: -0.01rem 0 0 0 $primary-color;
				}

				&:first-child {
					border-left-width: 0.01rem;
					box-shadow: none;
				}
			}
		}

		.header-operation-right {
			display: flex;
			align-items: center;

			input {
				background: #ffffff;
				border: 0.01rem solid #e6e6e6;
				border-radius: 0.02rem;
				height: 0.36rem;
				padding: 0 0.15rem;
				font-size: 0.14rem;
			}

			.search-btn {
				width: 0.36rem;
				height: 0.36rem;
				background: #ffffff;
				border: 0.01rem solid #e6e6e6;
				border-radius: 0.02rem;
				border-left: 0;
				text-align: center;
				line-height: 0.36rem;
				cursor: pointer;
			}
		}
	}

	.content {
		box-sizing: border-box;
		padding: 0.15rem 0;
		height: calc(100% - 0.78rem);
		transform: rotate(0);
		display: flex;
		flex-direction: column;
	}

	.type-switch {
		width: 100%;
		font-size: 0.14rem;
		margin-bottom: 0.15rem;
		white-space: nowrap;

		.switch-item {
			padding: 0.1rem 0.2rem;
			color: #303133;
			font-size: 0.14rem;
			cursor: pointer;
			display: inline-block;
		}

		.switch-item.active {
			background-color: rgba(133, 88, 250, 0.1);
			color: $primary-color;
		}
	}

	.list-wrap {
		flex: 1;
		height: 0;
	}

	.table-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.table-item {
			border: 0.01rem solid #e6e6e6;
			display: flex;
			align-items: center;
			min-width: 2rem;
			padding: 0.1rem;
			box-sizing: border-box;
			margin-right: 0.1rem;
			margin-bottom: 0.1rem;
			cursor: pointer;
			transition: all 0.3s;
			position: relative;

			&.item-mum-2 {
				width: calc((100% - 0.1rem) / 2);

				&:nth-child(2n + 2) {
					margin-right: 0;
				}
			}

			&.item-mum-3 {
				width: calc((100% - 0.2rem) / 3);

				&:nth-child(3n + 3) {
					margin-right: 0;
				}
			}

			&.item-mum-4 {
				width: calc((100% - 0.3rem) / 4);

				&:nth-child(4n + 4) {
					margin-right: 0;
				}
			}

			&:hover {
				background-color: #eee;
			}

			.item-img {
				width: 0.7rem;
				height: 0.7rem;
				min-width: 0.7rem;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-info {
				margin-left: 0.1rem;
				cursor: pointer;
				flex: 1;

				.item-name {
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					height: 0.4rem;
				}

				.item-time {
					font-size: 0.12rem;
					color: #909399;
				}

				.item-money {
					font-size: 0.14rem;
					color: #fe2278;
					line-height: 1;
					margin-top: 0.05rem;

					.util {
						font-size: 0.12rem;
					}
				}

				.item-rights {
					font-size: 0.12rem;
					color: #909399;

					.iconfont {
						margin-left: 0.05rem;
					}
				}

				.rights-wrap {
					width: 1rem;
					padding: 0.1rem;
					margin-top: 0.15rem;
					background-color: #fff;
					border: 0.01rem solid #ebeef5;
					border-radius: 0.04rem;
					box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
				}
			}

			.no-stock {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 0, 0, 0.5);
				cursor: not-allowed;

				image {
					height: 60%;
				}
			}
		}

		.item-card {
			border: 0.01rem solid #e6e6e6;
			display: flex;
			align-items: center;
			min-width: 2.5rem;
			padding: 0;
			box-sizing: border-box;
			margin-right: 0.1rem;
			margin-bottom: 0.1rem;
			cursor: pointer;
			transition: all 0.3s;
			position: relative;
			flex-direction: column;
			border-radius: 0.03rem;
			overflow: hidden;

			.item-top {
				width: 100%;
				display: flex;
				flex-direction: column;
				height: 0.9rem;
				background-size: 100% 100%;
				padding: 0.1rem;
				box-sizing: border-box;
				color: #ffffff;
				justify-content: space-between;

				.item-title {
					display: flex;
					width: 100%;
					justify-content: space-between;

					.item-rights {
						border: 0.01rem solid #fff;
						border-radius: 0.03rem;
						font-size: 0.12rem;
						padding: 0.01rem 0.03rem;
					}

					.item-name {
						font-weight: 600;
					}
				}

				.item-time {
					text-align: right;
				}
			}

			.item-bottom {
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 0.04rem 0.1rem;
				box-sizing: border-box;
				align-items: center;

				.item-money {
					color: #fe3c83;
				}

				.item-btn {
					font-size: 0.12rem;

					.iconfont {
						margin-left: 0.03rem;
						font-size: 0.12rem;
					}
				}
			}
		}
	}

	.sku-wrap {
		width: 6rem;
		background-color: #fff;
		border-radius: 0.04rem;
		box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

		.header,
		.footer {
			height: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 0.01rem solid #e6e6e6;
			position: relative;

			.title {
				font-size: 0.16rem;
				font-weight: bold;
			}

			.iconfont {
				line-height: 1;
				position: absolute;
				right: 0.15rem;
				font-size: 0.2rem;
				cursor: pointer;
			}
		}

		.body {
			padding: 0.15rem 0.15rem 0.25rem 0.15rem;

			scroll-view {
				max-height: 2rem;
			}

			.item-card {
				border: 0.01rem solid #e6e6e6;
				display: flex;
				align-items: center;
				width: 2.5rem;
				padding: 0;
				box-sizing: border-box;
				margin-right: 0.1rem;
				margin-bottom: 0.1rem;
				cursor: pointer;
				transition: all 0.3s;
				position: relative;
				flex-direction: column;
				border-radius: 0.03rem;
				overflow: hidden;
				margin: 0 auto;

				.item-top {
					width: 100%;
					display: flex;
					flex-direction: column;
					height: 0.9rem;
					background-size: 100% 100%;
					padding: 0.1rem;
					box-sizing: border-box;
					color: #ffffff;
					justify-content: space-between;

					.item-title {
						display: flex;
						width: 100%;
						justify-content: space-between;

						.item-rights {
							border: 0.01rem solid #fff;
							border-radius: 0.03rem;
							font-size: 0.12rem;
							padding: 0.01rem 0.03rem;
						}

						.item-name {
							font-weight: 600;
						}
					}

					.item-time {
						text-align: right;
					}
				}

				.item-bottom {
					display: flex;
					justify-content: space-between;
					width: 100%;
					padding: 0.04rem 0.1rem;
					box-sizing: border-box;
					align-items: center;

					.item-money {
						color: #fe3c83;
					}

					.item-btn {
						font-size: 0.12rem;

						.iconfont {
							margin-left: 0.03rem;
							font-size: 0.12rem;
						}
					}
				}
			}
		}

		.spec {
			line-height: 0.35rem;
			font-weight: bold;
			margin-top: 0.1rem;
		}

		.spec-value {
			.value-item {
				display: inline-block;
				height: 0.3rem;
				line-height: 0.3rem;
				background-color: #fff;
				color: #333;
				border: 0.01rem solid #e6e6e6;
				margin: 0.05rem 0.1rem 0 0;
				padding: 0 0.1rem;
				cursor: pointer;
				transition: all 0.3s;
				border-radius: 0.04rem;

				&:hover,
				&.active {
					background: rgba($color: $primary-color, $alpha: 0.1);
					border-color: $primary-color;
					color: $primary-color;
				}
			}
		}

		.goods-info {
			display: flex;

			.image {
				width: 0.7rem;
				height: 0.7rem;
				margin-right: 0.1rem;

				image {
					width: 100%;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					line-height: 1;
					margin-top: 0.05rem;
				}
			}
		}

		.footer {
			border-top: 0.01rem solid #e6e6e6;
			border-bottom: unset;

			button {
				width: 1rem;
			}
		}
	}

	.empty {
		text-align: center;
		padding-top: 1.2rem;

		image {
			width: 2rem;
		}

		.tips {
			color: #999;
			margin-top: 0.15rem;
		}
	}

	/deep/ .uni-scroll-view {
		&::-webkit-scrollbar {
			width: 0.06rem;
			height: 0.06rem;
			background-color: rgba($color: #000000, $alpha: 0);
		}

		&::-webkit-scrollbar-button {
			display: none;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 0.06rem;
			box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
			background-color: #ddd;
			display: none;
		}

		&:hover::-webkit-scrollbar-thumb {
			display: block;
		}

		&::-webkit-scrollbar-track {
			background-color: transparent;
		}
	}
</style>